<template>
  <div class="foSi14 poRel" style="padding: 20px;">
    <div class="borRad20 coFFF hei34 dis disAl cuPo poAbs fanhui bac6b7" @click.stop="fanhui()">返回</div>
    <div style="height: 30px;" />
    <div class="mar" style="width: 840px;">
      <div class="foSi12 titl">预约规则设置</div>
      <el-form ref="ruleForm1" :model="ruleForm1" :rules="rules1">
        <div class="hei44 dis disAl item-l mar-bott30" style="padding: 0 15px;">
          <div class="label">预约规则</div>
          <div class="dis disAl">
            <div class="dis disAl cuPo" @click.stop="regulationClick(1)">
              <div
                class="dis disAl disJuC bacFFF borRad50"
                style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
              >
                <div
                  v-if="ruleForm1.regulation === 1"
                  class="borRad50"
                  style="width: 6px;height: 6px;background: #6b7cdd;"
                />
              </div>
              <div class="mar-left5">遵从系统设置</div>
            </div>
            <div class="dis disAl cuPo mar-left30" @click.stop="regulationClick(2)">
              <div
                class="dis disAl disJuC bacFFF borRad50"
                style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
              >
                <div
                  v-if="ruleForm1.regulation === 2"
                  class="borRad50"
                  style="width: 6px;height: 6px;background: #6b7cdd;"
                />
              </div>
              <div class="mar-left5">单独设置，不遵从系统</div>
            </div>
          </div>
        </div>
        <div class="poRel">
          <div
            v-if="ruleForm1.regulation === 1"
            class="wh100 poAbs"
            style="top: 0;z-index: 10"
            @click.stop="jinzhi"
          />
          <div class="foSi12 titl">预约时间设置</div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">预约方式</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.mode = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.mode === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">不支持会员自主预约</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.mode = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.mode === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">单自主预约，不限制预约时间 </div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.mode = 3">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.mode === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">自主预约，限制预约时间</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.mode === 3" class="dis item-l mar-bott10" style="padding: 5px 15px;">
            <div class="label">预约时间</div>
            <div>
              <div class="dis disAl mar-bott10">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.time = 1"
                >
                  <div
                    v-if="ruleForm1.time === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">提前</div>
                <el-form-item prop="fenTime" class="mp0">
                  <el-input
                    v-model="ruleForm1.astrict1"
                    class="cen"
                    style="width: 80px;"
                    placeholder="不限制"
                  />
                </el-form-item>
                <div class="mar-left10 mar-right5">天，</div>
                <el-select v-model="ruleForm1.startShi" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in shiList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5 mar-right5">:</div>
                <el-select v-model="ruleForm1.startFen" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in fenList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left10 mar-right10">至</div>
                <el-select v-model="ruleForm1.endShi" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in shiList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5 mar-right5">:</div>
                <el-select v-model="ruleForm1.endFen" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in fenList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5">接受自主预约</div>
              </div>
              <div class="dis disAl mar-bott10">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.time = 2"
                >
                  <div
                    v-if="ruleForm1.time === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">提前</div>
                <el-form-item prop="astrict2" class="mp0">
                  <el-input
                    v-model="ruleForm1.astrict2"
                    class="cen"
                    style="width: 80px;"
                    placeholder="不限制"
                  />
                </el-form-item>
                <div class="mar-left10 mar-right5">天，</div>
                <el-select v-model="ruleForm1.startShi1" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in shiList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5 mar-right5">:</div>
                <el-select v-model="ruleForm1.startFen1" class="sel" style="width: 60px;">
                  <el-option
                    v-for="(item,index) in fenList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div class="mar-left5">接受自主预约</div>
              </div>
              <div class="dis disAl">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.time = 3"
                >
                  <div
                    v-if="ruleForm1.time === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">开课前</div>
                <el-form-item prop="fenTime1" class="mp0">
                  <el-input
                    v-model="ruleForm1.fenTime1"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟接受自主预约</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.mode >= 2" class="dis item-l mar-bott30" style="padding: 5px 15px;">
            <div class="label">预约截止时间</div>
            <div class="dis disAl">
              <div class="mar-right15">课程预约人数未满，会员需早于开课前</div>
              <el-form-item prop="fenTime2" class="mp0">
                <el-input
                  v-model="ruleForm1.fenTime2"
                  class="cen"
                  style="width: 80px;"
                  placeholder="0"
                />
              </el-form-item>
              <div class="mar-left5">分钟接受自主预约</div>
            </div>
          </div>
          <div class="foSi12 titl">排队候补设置</div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">排队候补</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.candidate = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.candidate === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">开启</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.candidate = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.candidate === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">关闭</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.candidate === 1" class="dis item-l mar-bott30" style="padding: 5px 15px;">
            <div class="label">候补设置</div>
            <div>
              <div class="dis disAl mar-bott10">
                <div class="mar-right15">最大排队人数</div>
                <el-form-item prop="upMax" class="mp0">
                  <el-input
                    v-model="ruleForm1.upMax"
                    class="cen"
                    style="width: 90px;"
                    placeholder="0"
                  />
                </el-form-item>
              </div>
              <div class="dis disAl mar-bott10">
                <div class="mar-right15">开课前</div>
                <el-form-item prop="stopTime" class="mp0">
                  <el-input
                    v-model="ruleForm1.stopTime"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟停止排队</div>
              </div>
              <div class="dis disAl">
                <div class="mar-right15">开课前</div>
                <el-form-item prop="stopCandidate" class="mp0">
                  <el-input
                    v-model="ruleForm1.stopCandidate"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟停止候补</div>
              </div>
            </div>
          </div>
          <div class="foSi12 titl">签到设置</div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">自主签到</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.selfCheck = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.selfCheck === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">开启</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.selfCheck = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.selfCheck === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">关闭</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.selfCheck === 1" class="dis item-l mar-bott10" style="padding: 5px 15px;">
            <div class="label">签到时间</div>
            <div>
              <div class="dis disAl mar-bott10 hei34">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.selfCheckTime = 1"
                >
                  <div
                    v-if="ruleForm1.selfCheckTime === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">课程当天，会员可随时签到</div>
              </div>
              <div class="dis disAl mar-bott10 hei34">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.selfCheckTime = 2"
                >
                  <div
                    v-if="ruleForm1.selfCheckTime === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">课程当天，会员可在课程结束前签到</div>
              </div>
              <div class="dis disAl">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.selfCheckTime = 3"
                >
                  <div
                    v-if="ruleForm1.selfCheckTime === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">课程当天，会员可在课程结束后</div>
                <el-form-item prop="selfCheckFenTime" class="mp0">
                  <el-input
                    v-model="ruleForm1.selfCheckFenTime"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟内签到</div>
              </div>
            </div>
          </div>
          <!--					<div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">-->
          <!--						<div class="label">扫码签到</div>-->
          <!--						<div class="dis disAl">-->
          <!--							<div class="dis disAl cuPo" @click.stop="ruleForm1.codeScan = 1">-->
          <!--								<div class="dis disAl disJuC bacFFF borRad50"-->
          <!--									style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">-->
          <!--									<div v-if="ruleForm1.codeScan === 1" class="borRad50"-->
          <!--										style="width: 6px;height: 6px;background: #6b7cdd;"></div>-->
          <!--								</div>-->
          <!--								<div class="mar-left5">开启</div>-->
          <!--							</div>-->
          <!--							<div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.codeScan = 2">-->
          <!--								<div class="dis disAl disJuC bacFFF borRad50"-->
          <!--									style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">-->
          <!--									<div v-if="ruleForm1.codeScan === 2" class="borRad50"-->
          <!--										style="width: 6px;height: 6px;background: #6b7cdd;"></div>-->
          <!--								</div>-->
          <!--								<div class="mar-left5">关闭</div>-->
          <!--							</div>-->
          <!--						</div>-->
          <!--					</div>-->
          <!--					<div v-if="ruleForm1.codeScan === 1" class="dis item-l mar-bott30" style="padding: 5px 15px;">-->
          <!--						<div class="label">签到时间</div>-->
          <!--						<div>-->
          <!--							<div class="dis disAl mar-bott10 hei34">-->
          <!--								<div class="dis disAl disJuC bacFFF borRad50 cuPo"-->
          <!--									@click.stop="ruleForm1.codeScanTime = 1"-->
          <!--									style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">-->
          <!--									<div v-if="ruleForm1.codeScanTime === 1" class="borRad50"-->
          <!--										style="width: 6px;height: 6px;background: #6b7cdd;"></div>-->
          <!--								</div>-->
          <!--								<div class="mar-left5">课程当天，会员可签到两小时内开始的课程</div>-->
          <!--							</div>-->
          <!--							<div class="dis disAl mar-bott10 hei34">-->
          <!--								<div class="dis disAl disJuC bacFFF borRad50 cuPo"-->
          <!--									@click.stop="ruleForm1.codeScanTime = 2"-->
          <!--									style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">-->
          <!--									<div v-if="ruleForm1.codeScanTime === 2" class="borRad50"-->
          <!--										style="width: 6px;height: 6px;background: #6b7cdd;"></div>-->
          <!--								</div>-->
          <!--								<div class="mar-left5">课程当天，会员可在课程结束前扫码签到</div>-->
          <!--							</div>-->
          <!--							<div class="dis disAl">-->
          <!--								<div class="dis disAl disJuC bacFFF borRad50 cuPo"-->
          <!--									@click.stop="ruleForm1.codeScanTime = 3"-->
          <!--									style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">-->
          <!--									<div v-if="ruleForm1.codeScanTime === 3" class="borRad50"-->
          <!--										style="width: 6px;height: 6px;background: #6b7cdd;"></div>-->
          <!--								</div>-->
          <!--								<div class="mar-left5 mar-right15">课程当天，会员可在课程开始前</div>-->
          <!--								<el-form-item prop="codeScanEnd" class="mp0">-->
          <!--									<el-input v-model="ruleForm1.codeScanEnd" class="cen" style="width: 80px;"-->
          <!--										placeholder="0" />-->
          <!--								</el-form-item>-->
          <!--								<div class="mar-left5 mar-right5">分钟至课程结束后</div>-->
          <!--								<el-form-item prop="codeScanEndTime" class="mp0">-->
          <!--									<el-input v-model="ruleForm1.codeScanEndTime" class="cen" style="width: 80px;"-->
          <!--										placeholder="0" />-->
          <!--								</el-form-item>-->
          <!--								<div class="mar-left5">分钟内扫码签到</div>-->
          <!--							</div>-->
          <!--						</div>-->
          <!--					</div>-->
          <div class="setting-tips__normal mar-bott10">
            <svg-icon icon-class="tishi" class="mar0" style="width: 16px;height: 16px;" />
            <span>预约取消设置仅针对会员支付的约课，无卡支付的约课暂不支持会员自主预约取消</span>
          </div>
          <div class="foSi12 titl">预约取消设置</div>
          <div class="hei44 dis disAl item-l mar-bott10" style="padding: 0 15px;">
            <div class="label">自主取消</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo" @click.stop="ruleForm1.selfCancel = 1">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.selfCancel === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">开启</div>
              </div>
              <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.selfCancel = 2">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                >
                  <div
                    v-if="ruleForm1.selfCancel === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">关闭</div>
              </div>
            </div>
          </div>
          <div v-if="ruleForm1.selfCancel === 1" class="dis item-l mar-bott10" style="padding: 5px 15px;">
            <div class="label">取消时间</div>
            <div>
              <div class="dis disAl mar-bott10">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.s_selfCancel = 1"
                >
                  <div
                    v-if="ruleForm1.s_selfCancel === 1"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">会员自主取消不晚于开课前</div>
                <el-form-item prop="selfCancelTime1" class="mp0">
                  <el-input
                    v-model="ruleForm1.selfCancelTime1"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟</div>
              </div>
              <div class="dis disAl mar-bott10">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.s_selfCancel = 2"
                >
                  <div
                    v-if="ruleForm1.s_selfCancel === 2"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">会员自主取消不晚于开课后</div>
                <el-form-item prop="selfCancelTime2" class="mp0">
                  <el-input
                    v-model="ruleForm1.selfCancelTime2"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟</div>
              </div>
              <div class="dis disAl">
                <div
                  class="dis disAl disJuC bacFFF borRad50 cuPo"
                  style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  @click.stop="ruleForm1.s_selfCancel = 3"
                >
                  <div
                    v-if="ruleForm1.s_selfCancel === 3"
                    class="borRad50"
                    style="width: 6px;height: 6px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right15">会员自主取消不晚于课程结束后</div>
                <el-form-item prop="selfCancelTime3" class="mp0">
                  <el-input
                    v-model="ruleForm1.selfCancelTime3"
                    class="cen"
                    style="width: 80px;"
                    placeholder="0"
                  />
                </el-form-item>
                <div class="mar-left5">分钟</div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="dis disAl disJuC " style="padding: 30px 0;">
      <div
        class="dis disAl hei34 borRad20 coFFF cuPo bac6b7"
        style="padding: 0 24px;"
        @click.stop="submitForm('ruleForm1')"
      >保存</div>
      <div
        class="mar-left30 dis disAl hei34 borRad20 coFFF cuPo"
        style="background: #616b74;padding: 0 24px;"
        @click.stop="fanhui()"
      >取消</div>
    </div>
  </div>
</template>

<script>
import {
  getXuan
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import {
  courseDetails,
  courseAddEdit,
  reservationDetail
} from '@/api/coures'
export default {
  name: 'CourseEdit2',
  components: {},
  data() {
    const validateAstrict1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.time === 1 && this.ruleForm1.mode === 3) {
        if (!reg.test(value)) {
          callback(new Error('请输入整数'))
        } else {
          var absVal = Math.abs(value)
          if (Number(value) !== absVal) {
            callback(new Error('请输入整数'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    const validateAstrict2 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.time === 2 && this.ruleForm1.mode === 3) {
        if (!reg.test(value)) {
          callback(new Error('请输入整数'))
        } else {
          var absVal = Math.abs(value)
          if (Number(value) !== absVal) {
            callback(new Error('请输入整数'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    const validateFenTime1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.time === 3 && this.ruleForm1.mode === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateFenTime2 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.mode >= 2) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateUpMax = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.candidate === 1) {
        if (!reg.test(value) || (!value && value !== 0) || value < 1 || value > 50) {
          callback(new Error('请输入(1~50)整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateStop = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.candidate === 1) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateSelfCheckFenTime = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.selfCheck === 1 && this.ruleForm1.selfCheckTime === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateCodeScan = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.codeScan === 1 && this.ruleForm1.codeScanTime === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateSelfCancelTime1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.selfCancel === 1 && this.ruleForm1.s_selfCancel === 1) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateSelfCancelTime2 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.selfCancel === 1 && this.ruleForm1.s_selfCancel === 2) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateSelfCancelTime3 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm1.selfCancel === 1 && this.ruleForm1.s_selfCancel === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      shiList: [],
      fenList: [],
      ruleForm1: {
        regulation: 1,
        mode: 3,
        time: 2,
        astrict1: null,
        astrict2: 3,
        startShi: 0,
        startFen: 0,
        endShi: 0,
        endFen: 0,
        startShi1: 0,
        startFen1: 0,
        fenTime1: 0,
        fenTime2: 0,
        candidate: 1,
        upMax: 5,
        stopTime: 0,
        stopCandidate: 0,
        selfCheck: 2,
        selfCheckTime: 2,
        selfCheckFenTime: 0,
        codeScan: 1,
        codeScanTime: 2,
        codeScanEnd: 0,
        codeScanEndTime: 0,
        selfCancel: 1,
        s_selfCancel: 1,
        selfCancelTime1: 30,
        selfCancelTime2: 0,
        selfCancelTime3: 0
      },
      rules1: {
        astrict1: [{
          required: true,
          trigger: 'blur',
          validator: validateAstrict1
        }],
        astrict2: [{
          required: true,
          trigger: 'blur',
          validator: validateAstrict2
        }],
        fenTime1: [{
          required: true,
          trigger: 'blur',
          validator: validateFenTime1
        }],
        fenTime2: [{
          required: true,
          trigger: 'blur',
          validator: validateFenTime2
        }],
        upMax: [{
          required: true,
          trigger: 'blur',
          validator: validateUpMax
        }],
        stopTime: [{
          required: true,
          trigger: 'blur',
          validator: validateStop
        }],
        stopCandidate: [{
          required: true,
          trigger: 'blur',
          validator: validateStop
        }],
        selfCheckFenTime: [{
          required: true,
          trigger: 'blur',
          validator: validateSelfCheckFenTime
        }],
        codeScanEnd: [{
          required: true,
          trigger: 'blur',
          validator: validateCodeScan
        }],
        codeScanEndTime: [{
          required: true,
          trigger: 'blur',
          validator: validateCodeScan
        }],
        selfCancelTime1: [{
          required: true,
          trigger: 'blur',
          validator: validateSelfCancelTime1
        }],
        selfCancelTime2: [{
          required: true,
          trigger: 'blur',
          validator: validateSelfCancelTime2
        }],
        selfCancelTime3: [{
          required: true,
          trigger: 'blur',
          validator: validateSelfCancelTime3
        }]
      },
      type: '',
      cid: '',
      url: ''
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var query = this.$route.query
    this.type = Number(query.type)
    this.cid = query.cid
    this.url = '/course/courseParticulars?type=' + query.type + '&cid=' + query.cid
    var xuanList = [{
      name: '编辑课程',
      url: '/course/courseEdit2?type=' + query.type + '&cid=' + query.cid,
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    for (var i = 0; i < 24; i++) {
      this.shiList.push({
        label: i < 10 ? '0' + i : i,
        value: i
      })
    }
    for (var i = 0; i < 60; i += 5) {
      this.fenList.push({
        label: i < 10 ? '0' + i : i,
        value: i
      })
    }
    this.getList()
  },
  methods: {
    fanhui() {
      this.$router.go(-1)
    },
    getReservationDetail() {
      reservationDetail({
        'type': this.type
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.ruleForm1 = {
          regulation: 1,
          mode: data.res_type,
          time: data.res_type2,
          astrict1: data.res_type2 === 1 ? data.res_day : '',
          astrict2: data.res_type2 === 2 ? data.res_day : '',
          startShi: data.res_type2 === 1 ? data.res_hour1 : 0,
          startFen: data.res_type2 === 1 ? data.res_minute1 : 0,
          endShi: data.res_type2 === 1 ? data.res_hour2 : 0,
          endFen: data.res_type2 === 1 ? data.res_minute2 : 0,
          startShi1: data.res_type2 === 2 ? data.res_hour1 : 0,
          startFen1: data.res_type2 === 2 ? data.res_minute1 : 0,
          fenTime1: data.advance2,
          fenTime2: data.advance,
          candidate: data.candidate,
          upMax: data.max_line_up_num,
          stopTime: data.stop_queuing,
          stopCandidate: data.stop_waiting,
          selfCheck: data.self_check,
          selfCheckTime: data.check_in_type1,
          selfCheckFenTime: data.check_front_minute1,
          codeScan: data.scan_check,
          codeScanTime: data.check_in_type,
          codeScanEnd: data.check_front_minute,
          codeScanEndTime: data.check_after_minute,
          selfCancel: data.self_cancel,
          s_selfCancel: data.self_cancel_type,
          selfCancelTime1: data.cancel_front_minute,
          selfCancelTime2: data.cancel_start_minute,
          selfCancelTime3: data.cancel_after_minute
        }
      }).catch(error => {
        console.log(error)
      })
    },
    regulationClick(index) {
      if (this.ruleForm1.regulation !== index) {
        if (index === 1) {
          this.getReservationDetail()
        } else {
          this.ruleForm1.regulation = index
        }
      }
    },
    jinzhi() {
      this.$message.error('遵从系统设置时不可编辑，如需编辑请选择单独设置')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          courseAddEdit({
            'id': this.cid,
            'res_rule': this.ruleForm1.regulation === 1 ? 0 : 1,
            'res_type': this.ruleForm1.mode,
            'res_type2': this.ruleForm1.time,
            'res_day': this.ruleForm1.time === 1 ? this.ruleForm1.astrict1 : this.ruleForm1.astrict2,
            'res_hour1': this.ruleForm1.time === 1 ? this.ruleForm1.startShi : this
              .ruleForm1.startShi1,
            'res_minute1': this.ruleForm1.time === 1 ? this.ruleForm1.startFen : this
              .ruleForm1.startFen1,
            'res_hour2': this.ruleForm1.endShi,
            'res_minute2': this.ruleForm1.endFen,
            'advance2': this.ruleForm1.fenTime1,
            'advance': this.ruleForm1.fenTime2,
            'candidate': this.ruleForm1.candidate,
            'max_line_up_num': this.ruleForm1.upMax,
            'stop_queuing': this.ruleForm1.stopTime,
            'stop_waiting': this.ruleForm1.stopCandidate,
            'self_check': this.ruleForm1.selfCheck,
            'check_in_type1': this.ruleForm1.selfCheckTime,
            'check_front_minute1': this.ruleForm1.selfCheckFenTime,
            'scan_check': this.ruleForm1.codeScan,
            'check_in_type': this.ruleForm1.codeScanTime,
            'check_front_minute': this.ruleForm1.codeScanEnd,
            'check_after_minute': this.ruleForm1.codeScanEndTime,
            'self_cancel': this.ruleForm1.selfCancel,
            'self_cancel_type': this.ruleForm1.s_selfCancel,
            'cancel_front_minute': this.ruleForm1.selfCancelTime1,
            'cancel_start_minute': this.ruleForm1.selfCancelTime2,
            'cancel_after_minute': this.ruleForm1.selfCancelTime3
          }).then(response => {
            this.fanhui()
          }).catch(error => {
            console.log(error)
          })
        } else {
          this.$message.error('请按规则填写完整信息')
          return false
        }
      })
    },
    getList() {
      courseDetails({
        'courseid': this.cid // 1团课2精品课3私教课4班课
      }).then(response => {
        const {
          data
        } = response
        this.ruleForm1 = {
          regulation: data.res_rule === 0 ? 1 : 2,
          mode: data.res_type,
          time: data.res_type2,
          astrict1: data.res_type2 === 1 ? data.res_day : '',
          astrict2: data.res_type2 === 2 ? data.res_day : '',
          startShi: data.res_type2 === 1 ? data.res_hour1 : 0,
          startFen: data.res_type2 === 1 ? data.res_minute1 : 0,
          endShi: data.res_type2 === 1 ? data.res_hour2 : 0,
          endFen: data.res_type2 === 1 ? data.res_minute2 : 0,
          startShi1: data.res_type2 === 2 ? data.res_hour1 : 0,
          startFen1: data.res_type2 === 2 ? data.res_minute1 : 0,
          fenTime1: data.advance2,
          fenTime2: data.advance,
          candidate: data.candidate,
          upMax: data.max_line_up_num,
          stopTime: data.stop_queuing,
          stopCandidate: data.stop_waiting,
          selfCheck: data.self_check,
          selfCheckTime: data.check_in_type1,
          selfCheckFenTime: data.check_front_minute1,
          codeScan: data.scan_check,
          codeScanTime: data.check_in_type,
          codeScanEnd: data.check_front_minute,
          codeScanEndTime: data.check_after_minute,
          selfCancel: data.self_cancel,
          s_selfCancel: data.self_cancel_type,
          selfCancelTime1: data.cancel_front_minute,
          selfCancelTime2: data.cancel_start_minute,
          selfCancelTime3: data.cancel_after_minute
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.fanhui {
		background: #6b7cdd;
		padding: 0 24px;
		right: 63px;
		top: 10px;
		z-index: 10;
	}
	.titl {
		height: 25px;
		color: #787878;
	}

	.field {
		padding: 5px 15px;
		margin-bottom: 8px;
		background: #f2f2f2;
	}

	.label {
		float: left;
		width: 135px;
		min-height: 32px;
		line-height: 32px;
		padding-right: 10px;
		white-space: nowrap;
	}

	.item-l {
		background: #f2f2f2;
	}

	.item-r {
		width: 420px;
		padding: 0 15px;
	}

	.col {
		width: 36px;
		height: 36px;
		margin: 0 4px 3px 0;
	}

	.class-desc {
		width: 721px;
		height: 230px;
		border: 1px solid #d9d9d9;
		padding: 5px;
		line-height: 1.5;
	}

	.rich-insert {
		width: 100%;
		height: 30px;
		padding: 2px 5px;
		position: relative;
		vertical-align: text-top;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.rich-row {
		width: 100%;
		height: calc(100% - 31px);
		border: 0;
		background-color: #fff;
		box-sizing: border-box;
		padding: 5px;
		margin-top: 1px;
		outline: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	::v-deep .el-upload:focus {
		color: #000 !important;
	}

	::v-deep .el-upload-list {
		display: none;
	}

	.sel ::v-deep .el-input--medium .el-input__inner {
		padding: 0 20px 0 10px;
	}

	.cen ::v-deep .el-input__inner {
		text-align: center;
	}

	.setting-tips__normal {
		padding: 10px 15px;
		display: flex;
		align-items: center;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__label {
		color: #000 !important;
	}
	.img-size-tips {
	    position: absolute;
	    top: 3px;
	    left: 5px;
	    z-index: 10;
	    color: #fff;
	    font-size: 12px;
	}

	.avatar-tips {
	    position: absolute;
	    bottom: 3px;
	    left: 5px;
	    z-index: 10;
	    color: #fff;
	    font-size: 12px;
	}
	.que {
		display: inline-block;
		padding: 0 24px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		vertical-align: top;
	}
</style>
